<template>
  <div>
<!-- 查询条件 -->

    <el-row>
      <el-col :span="6" :offset="1">
        <el-date-picker
          v-model="date"
          @blur="searchDate"
          type="daterange"
          format="yyyy-MM-dd"
          value-format="timestamp"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="['00:00:00', '23:59:59']">
        </el-date-picker>
      </el-col>

      <el-col :span="1.5" >
        <el-button circle icon="el-icon-delete-solid" @click="deleteParam"></el-button>
        <el-button circle icon="el-icon-refresh" @click="refresh"></el-button>
      </el-col>
    </el-row><br>

    <!-- 表格 -->
  <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
      label="IP"
      width="180">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.ip }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="URL"
      width="120">
      <template slot-scope="scope">
        <el-popover trigger="hover" placement="top">
          <p>URL: {{ scope.row.url }}</p>
          <div slot="reference">
            <el-tag size="medium">{{ scope.row.url }}</el-tag>
          </div>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column
      label="请求方式"
      width="120">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.way }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="操作账号"
      width="120">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.operator }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="操作方式"
      width="80">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.type }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="说明"
      width="120">
      <template slot-scope="scope">
        <el-popover trigger="hover" placement="top">
          <p>参数: {{ scope.row.explain }}</p>
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.explain }}</el-tag>
          </div>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column
      label="操作时间"
      width="120">
      <template slot-scope="scope">
        <el-popover trigger="hover" placement="top">
          <p>参数: {{ scope.row.time }}</p>
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.time }}</el-tag>
          </div>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column
      label="操作类"
      width="120">
      <template slot-scope="scope">
        <el-popover trigger="hover" placement="top">
          <p>参数: {{ scope.row.clazz }}</p>
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.clazz }}</el-tag>
          </div>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column
      label="操作方法"
      width="120">
      <template slot-scope="scope">
        <el-popover trigger="hover" placement="top">
          <p>参数: {{ scope.row.method }}</p>
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.method }}</el-tag>
          </div>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column
      label="参数"
      width="120">
      <template slot-scope="scope">
        <el-popover trigger="hover" placement="top">
          <p>参数: {{ scope.row.args }}</p>
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.args }}</el-tag>
          </div>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column
      label="结果"
      width="80">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.result }}</span>
      </template>
    </el-table-column>
    
  </el-table>





  <el-pagination
    @size-change="handleSizeChangeA"
    @current-change="handleCurrentChangeA"
    :current-page="1"
    :page-sizes="[50, 100, 200]"
    :page-size="sizeEveryPage"
    layout="sizes, prev, pager, next"
    :total="total">
  </el-pagination>



  </div>

</template>

<script>
export default {
  data() {
    return {
      total:null,
      refreshKey:0,
      date:["null","null"],
      tableData: [],
      sizeEveryPage:50,
      pageNum:1,
    }
  },

  methods:{
    
    //清空参数
    deleteParam(){
      this.date=["null","null"];
      this.sizeEveryPage=10;
      this.pageNum=1;
    },
    //刷新
    refresh(){
      this.selectByPage();
    },
   
    searchDate(){
      //按时间查询
      this.selectByPage();
    },

    //分页
    //按每页显示条数查
    handleSizeChangeA(val) {

      this.sizeEveryPage = val;
      //console.log(this.sizeEveryPage);
      this.selectByPage();
    },
    //按页码查
    handleCurrentChangeA(val) {

      this.pageNum = val;
      //console.log(this.pageNum);
      this.selectByPage();
    },
    
    //分页查询方法
    selectByPage(){
      this.axios.get(this.baseUrl+'syslog/findAll/'+this.pageNum+'/'+this.sizeEveryPage
      ).then(res=>{
        console.log(res.data.data);
        this.tableData = res.data.data.content;
        this.total = res.data.data.totalElements;
        //console.log(res.data.data.t);
      })
    },

  },
  created(){
    this.axios.get(this.baseUrl+'syslog/findAll/'+this.pageNum+'/'+this.sizeEveryPage
    ).then(res=>{
      console.log(res.data.data);
      this.tableData = res.data.data.content;
      this.total = res.data.data.totalElements;
      //console.log(res.data.data.t);
    })



  }
}
</script>

<style scoped>

</style>
